<template>
  <div style="position: relative; margin-left: 20%; width: 80%; height: 100%">
    <div
      id="whole-box"
      style="position: absolute; left: 0; top: 0; right: 0; bottom: 0"
    ></div>
    <div
      style="
        display: flex;
        flex-wrap: wrap;
        margin-left: 6.5vw;
        padding: 1%;
        overflow-y: auto;
        height: calc(100% - 30px);
      "
    >
      <!-- <div class="box" v-for="i of 9" :key="i">{{ i }}</div> -->
      <div class="box" id="barEchart"></div>
      <div class="box" id="lineEchart"></div>
      <div class="box" id="pieEchart"></div>
      <div class="box" id="radarEchart"></div>
      <div class="box" id="pieEchart2"></div>
      <div class="box" id="verBarEchart"></div>
      <div class="box" id="cateEchart"></div>
      <div class="box" id="gaugeEchart"></div>
      <div class="box" id="raceEchart"></div>
      <div class="box" id="textEchart"></div>
      <div class="box" id="loadingEchart"></div>
      <div class="box" id=""></div>
      <div class="box" id=""></div>
      <div class="box" id=""></div>
      <div class="box" id=""></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {};
  },
  methods: {
    movingChart() {
      //
      let myChart = echarts.init(document.getElementById("whole-box"));

      let app = {};
      let option;

      let noise = this.getNoiseHelper();

      let config = (app.config = {
        frequency: 60,
        offsetX: 500,
        offsetY: 50,
        minSize: 0,
        maxSize: 10,
        duration: 1500,
        color0: "#c2e010",
        color1: "#783030",
        backgroundColor: "#281d1d",
        onChange() {
          myChart.setOption({
            backgroundColor: config.backgroundColor,
            graphic: {
              elements: this.reateElements(myChart, config, noise),
            },
          });
        },
      });

      noise.seed(Math.random());
      option = {
        backgroundColor: config.backgroundColor,
        graphic: {
          elements: this.createElements(myChart, config, noise),
        },
      };
      app.configParameters = {
        frequency: { min: 10, max: 1000 },
        offsetX: { min: 0, max: 1000 },
        offsetY: { min: 0, max: 1000 },
        minSize: { min: 0, max: 100 },
        maxSize: { min: 0, max: 100 },
        duration: { min: 100, max: 100000 },
      };

      myChart.setOption(option);
    },

    getNoiseHelper() {
      class Grad {
        constructor(x, y, z) {
          this.x = x;
          this.y = y;
          this.z = z;
        }
        dot2(x, y) {
          return this.x * x + this.y * y;
        }
        dot3(x, y, z) {
          return this.x * x + this.y * y + this.z * z;
        }
      }
      const grad3 = [
        new Grad(1, 1, 0),
        new Grad(-1, 1, 0),
        new Grad(1, -1, 0),
        new Grad(-1, -1, 0),
        new Grad(1, 0, 1),
        new Grad(-1, 0, 1),
        new Grad(1, 0, -1),
        new Grad(-1, 0, -1),
        new Grad(0, 1, 1),
        new Grad(0, -1, 1),
        new Grad(0, 1, -1),
        new Grad(0, -1, -1),
      ];
      const p = [
        151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225,
        140, 36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, 23, 190, 6, 148, 247,
        120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57,
        177, 33, 88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74,
        165, 71, 134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122,
        60, 211, 133, 230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54,
        65, 25, 63, 161, 1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169,
        200, 196, 135, 130, 116, 188, 159, 86, 164, 100, 109, 198, 173, 186, 3,
        64, 52, 217, 226, 250, 124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 85,
        212, 207, 206, 59, 227, 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170,
        213, 119, 248, 152, 2, 44, 154, 163, 70, 221, 153, 101, 155, 167, 43,
        172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232, 178, 185,
        112, 104, 218, 246, 97, 228, 251, 34, 242, 193, 238, 210, 144, 12, 191,
        179, 162, 241, 81, 51, 145, 235, 249, 14, 239, 107, 49, 192, 214, 31,
        181, 199, 106, 157, 184, 84, 204, 176, 115, 121, 50, 45, 127, 4, 150,
        254, 138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243, 141, 128, 195,
        78, 66, 215, 61, 156, 180,
      ];
      // To remove the need for index wrapping, double the permutation table length
      let perm = new Array(512);
      let gradP = new Array(512);
      // This isn't a very good seeding function, but it works ok. It supports 2^16
      // different seed values. Write something better if you need more seeds.
      function seed(seed) {
        if (seed > 0 && seed < 1) {
          // Scale the seed out
          seed *= 65536;
        }
        seed = Math.floor(seed);
        if (seed < 256) {
          seed |= seed << 8;
        }
        for (let i = 0; i < 256; i++) {
          let v;
          if (i & 1) {
            v = p[i] ^ (seed & 255);
          } else {
            v = p[i] ^ ((seed >> 8) & 255);
          }
          perm[i] = perm[i + 256] = v;
          gradP[i] = gradP[i + 256] = grad3[v % 12];
        }
      }
      seed(0);
      // ##### Perlin noise stuff
      function fade(t) {
        return t * t * t * (t * (t * 6 - 15) + 10);
      }
      function lerp(a, b, t) {
        return (1 - t) * a + t * b;
      }
      // 2D Perlin Noise
      function perlin2(x, y) {
        // Find unit grid cell containing point
        let X = Math.floor(x),
          Y = Math.floor(y);
        // Get relative xy coordinates of point within that cell
        x = x - X;
        y = y - Y;
        // Wrap the integer cells at 255 (smaller integer period can be introduced here)
        X = X & 255;
        Y = Y & 255;
        // Calculate noise contributions from each of the four corners
        let n00 = gradP[X + perm[Y]].dot2(x, y);
        let n01 = gradP[X + perm[Y + 1]].dot2(x, y - 1);
        let n10 = gradP[X + 1 + perm[Y]].dot2(x - 1, y);
        let n11 = gradP[X + 1 + perm[Y + 1]].dot2(x - 1, y - 1);
        // Compute the fade curve value for x
        let u = fade(x);
        // Interpolate the four results
        return lerp(lerp(n00, n10, u), lerp(n01, n11, u), fade(y));
      }
      return {
        seed,
        perlin2,
      };
    },

    createElements(myChart, config, noise) {
      const elements = [];
      for (let x = 20; x < myChart.getWidth(); x += 40) {
        for (let y = 20; y < myChart.getHeight(); y += 40) {
          const rand = noise.perlin2(
            x / config.frequency + config.offsetX,
            y / config.frequency + config.offsetY
          );
          elements.push({
            type: "circle",
            x,
            y,
            style: {
              fill: config.color1,
            },
            shape: {
              r: config.maxSize,
            },
            keyframeAnimation: {
              duration: config.duration,
              loop: true,
              delay: (rand - 1) * 4000,
              keyframes: [
                {
                  percent: 0.5,
                  easing: "sinusoidalInOut",
                  style: {
                    fill: config.color0,
                  },
                  scaleX: config.minSize / config.maxSize,
                  scaleY: config.minSize / config.maxSize,
                },
                {
                  percent: 1,
                  easing: "sinusoidalInOut",
                  style: {
                    fill: config.color1,
                  },
                  scaleX: 1,
                  scaleY: 1,
                },
              ],
            },
          });
        }
      }
      return elements;
    },

    initBar() {
      let dataList = {
        dataX: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        dataY1: [120.12, 200.32, 150.22, 80.46, 70.77, 110.78, 130.18],
        dataY2: [203.15, 148.66, 68.48, 123.21, 70.246, 20.67, 32.18],
        dataY3: [32.49, 43.21, 15.56, 84.32, 11.35, 42.96, 58.76],
        total: [],
      };
      dataList.dataX.forEach((item, index) => {
        let total = dataList.dataY1[index] + dataList.dataY2[index];
        dataList.total.push(total);
      });
      let barChart = echarts.init(document.getElementById("barEchart"));
      let option = {
        backgroundColor: "rgb(160,160,160)",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // type: "cross",
            type: "shadow",
            // type:"line",
          },
        },
        title: {
          text: "柱状图",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          top: "20%",
          containLabel: true,
        },
        dataZoom: [
          {
            // 鼠标滚动缩放
            type: "inside",
            xAxisIndex: [0],
          },
        ],
        xAxis: {
          type: "category",
          data: dataList.dataX,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(219,225,255,1)",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            // 间隔
            interval: 0,
            // 旋转
            rotate: 40,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(219,225,255,1)",
              width: 1,
              type: "solid",
            },
          },
        },
        series: [
          {
            name: "数量1",
            data: dataList.dataY1,
            type: "bar",
            stack: "A",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)",
            },
            label: {
              show: false, //开启显示
              position: "top", //在上方显示
              formatter: "{c}", //显示百分号
              textStyle: {
                //数值样式
                color: "#000", //字体颜色
                fontSize: 10, //字体大小
              },
            },
          },
          {
            name: "数量2",
            data: dataList.dataY2,
            type: "bar",
            stack: "A",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)",
            },
          },
          {
            name: "其他3",
            data: dataList.dataY3,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)",
            },
          },
          {
            name: "数量总计",
            data: dataList.total,
            // type: "line",
            type: "scatter",
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)",
            },
            label: {
              show: true, //开启显示
              position: "top", //在上方显示
              formatter: "{c}", //显示百分号
              textStyle: {
                //数值样式
                color: "#000", //字体颜色
                fontSize: 10, //字体大小
              },
            },
            itemStyle: {
              color: "none",
            },
            symbolSize: 0,
          },
        ],
        // 高亮样式。
        emphasis: {
          itemStyle: {
            // 高亮时点的颜色
            color: "rgb(255,255,255)",
          },
          // label: {
          //   show: true,
          //   // 高亮时标签的文字
          //   formatter: "高亮时显示的标签内容",
          // },
        },
      };
      barChart.setOption(option);
    },
    initLine() {
      let lineChart = echarts.init(document.getElementById("lineEchart"));

      let option = {
        legend: {
          show: true,
        },
        grid: {
          top: "1%",
          left: "1%",
          right: "1%",
          bottom: "1%",
          containLabel: true,
        },
        title: {
          text: "一天用电量分布",
          subtext: "纯属虚构",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "00:00",
            "01:15",
            "02:30",
            "03:45",
            "05:00",
            "06:15",
            "07:30",
            "08:45",
            "10:00",
            "11:15",
            "12:30",
            "13:45",
            "15:00",
            "16:15",
            "17:30",
            "18:45",
            "20:00",
            "21:15",
            "22:30",
            "23:45",
          ],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} W",
          },
          axisPointer: {
            snap: true,
          },
        },
        visualMap: [
          {
            type: "piecewise",
            show: false,
            dimension: 0,
            seriesIndex: 0, //第一部分数据
            pieces: [
              {
                lte: 6,
                color: "orange",
              },
              {
                gt: 6,
                lte: 8,
                color: "red",
              },
              {
                gt: 8,
                lte: 14,
                color: "purple",
              },
              {
                gt: 14,
                lte: 17,
                color: "Chocolate",
              },
              {
                gt: 17,
                color: "pink",
              },
            ],
          },
          {
            show: false,
            type: "piecewise",
            dimension: 0,
            seriesIndex: 1, //第二部分数据
            pieces: [
              {
                lte: 3,
                color: "red",
              },
              {
                gt: 3,
                lte: 8,
                color: "black",
              },
              {
                gt: 8,
                lte: 14,
                color: "green",
              },
              {
                gt: 14,
                lte: 17,
                color: "grey",
              },
              {
                gt: 17,
                color: "DodgerBlue",
              },
            ],
          },
        ],
        series: [
          //第一部分数据
          {
            name: "用电量",
            type: "line",
            smooth: true,
            data: [
              300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400,
              500, 600, 750, 800, 700, 600, 400,
            ],
          },
          //第二部分数据
          {
            name: "费用",
            type: "line",
            smooth: true,
            data: [
              200, 180, 150, 160, 170, 200, 450, 400, 300, 290, 280, 290, 300,
              400, 400, 650, 700, 600, 450, 300,
            ],
          },
        ],
      };

      lineChart.setOption(option);
    },
    initPie() {
      let pieChart = echarts.init(document.getElementById("pieEchart"));
      let option = {
        backgroundColor: "#2c343c",
        title: {
          text: "自定义饼状图",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },

        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },

        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1],
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 274, name: "联盟广告" },
              { value: 235, name: "视频广告" },
              { value: 400, name: "搜索引擎" },
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            label: {
              color: "rgba(219,225,255,1)",
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 1)",
              },
              smooth: 0.2,
              length: 10,
              length2: 20,
            },
            itemStyle: {
              color: "#c23531",
              shadowBlur: 200,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },

            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
            // itemStyle: {
            //   normal: {
            //     label: {
            //       show: true,
            //       formatter: "{b}  \n {d}%"//标题换行，按照自己的格式进行配置
            //     },
            //     labelLine: {
            //       show: true
            //     },
            //     borderWidth: 4,//每个扇形直接留有空隙
            //     borderColor: "#0C1E2A",//空隙颜色设置
            //     emphasis: {
            //       shadowBlur: 10,
            //       shadowOffsetX: 0,
            //       shadowColor: "rgba(0, 0, 0, 0.5)"
            //     },
            //   },
            // },
          },
        ],
      };
      pieChart.setOption(option);
    },
    initRadar() {
      let radarChart = echarts.init(document.getElementById("radarEchart"));
      let option = {
        backgroundColor: "#161627",
        title: {
          text: "雷达图",
          left: "2%",
          top: "2%",
          // left: "center",
          textStyle: {
            color: "#eee",
          },
        },
        legend: {
          orient: "vertical",
          right: 0,
          bottom: 0,
          data: ["北京", "上海", "广州"],
          itemGap: 10,
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
          // selectedMode: "single",
        },
        radar: {
          indicator: [
            { name: "AQI", max: 300 },
            { name: "PM2.5", max: 250 },
            { name: "PM10", max: 300 },
            { name: "CO", max: 5 },
            { name: "NO2", max: 200 },
            { name: "SO2", max: 100 },
          ],
          shape: "circle",
          splitNumber: 5,
          name: {
            textStyle: {
              color: "rgb(238, 197, 102)",
            },
          },
          radius: [0, "60%"],
          splitLine: {
            lineStyle: {
              color: [
                "rgba(238, 197, 102, 0.1)",
                "rgba(238, 197, 102, 0.2)",
                "rgba(238, 197, 102, 0.4)",
                "rgba(238, 197, 102, 0.6)",
                "rgba(238, 197, 102, 0.8)",
                "rgba(238, 197, 102, 1)",
              ].reverse(),
            },
          },
          splitArea: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "rgba(238, 197, 102, 0.5)",
            },
          },
        },
        series: [
          {
            name: "北京",
            type: "radar",
            lineStyle: {
              normal: {
                width: 2,
                opacity: 0.5,
              },
            },
            data: [[109, 81, 121, 1.28, 68, 51, 4]],
            symbol: "none",
            itemStyle: {
              color: "#F9713C",
            },
            areaStyle: {
              opacity: 0.1,
            },
          },
          {
            name: "上海",
            type: "radar",
            lineStyle: {
              normal: {
                width: 1,
                opacity: 0.5,
              },
            },
            data: [[109, 68, 87, 2.68, 74, 29, 15]],
            symbol: "none",
            itemStyle: {
              color: "#B3E4A1",
            },
            areaStyle: {
              opacity: 0.2,
            },
          },
          {
            name: "广州",
            type: "radar",
            lineStyle: {
              normal: {
                width: 3,
                opacity: 0.5,
              },
            },
            data: [[267, 216, 280, 4.8, 108, 64, 9]],
            symbol: "none",
            itemStyle: {
              color: "rgb(238, 197, 102)",
            },
            areaStyle: {
              opacity: 0.05,
            },
          },
        ],
      };
      radarChart.setOption(option);
    },
    initPie2() {
      let pieChart = echarts.init(document.getElementById("pieEchart2"));
      let option = {
        title: {
          text: "双层饼图",
          left: "48%",
          textStyle: {
            color: "#eee",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          itemGap: 9,
          left: 10,
          data: [
            "语文",
            "数学",
            "英语",
            "物理",
            "化学",
            "生物",
            "政治",
            "历史",
            "地理",
          ],
          textStyle: {
            color: "rgb(220,220,220)",
          },
        },
        series: [
          {
            name: "主科",
            type: "pie",
            radius: [0, "40%"],
            center: ["60%", "55%"],
            label: {
              position: "inner",
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 115, name: "语文", selected: true },
              { value: 102, name: "数学" },
              { value: 134, name: "英语" },
            ],
          },
          {
            name: "副科",
            type: "pie",
            radius: ["50%", "65%"],
            center: ["60%", "55%"],
            data: [
              { value: 97, name: "物理" },
              { value: 94, name: "化学" },
              { value: 86, name: "生物" },
              { value: 87, name: "政治" },
              { value: 93, name: "历史" },
              { value: 95, name: "地理" },
            ],
          },
        ],
      };
      pieChart.setOption(option);
    },
    initVecBar() {
      let verBarChart = echarts.init(document.getElementById("verBarEchart"));
      let option = {
        backgroundColor: "#e7e7e7",
        dataZoom: [
          {
            // 鼠标滚动缩放
            type: "inside",
            xAxisIndex: [0],
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ["利润", "支出", "收入"],
          left: "center",
          top: 0,
          textStyle: {
            color: "#f00",
          },
          icon: "circle",
        },
        grid: {
          left: "4%",
          right: "4%",
          top: "10%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "value",
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,25,25,1)",
                width: 2,
                type: "solid",
              },
            },
            splitLine: {
              show: true, // X轴线 颜色类型的修改
              lineStyle: {
                type: "dashed",
                color: "rgba(25,205,25,1)",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,25,255,1)",
                width: 3,
                type: "solid",
              },
              textStyle: {
                color: "rgba(25,255,25,1)",
              },
            },
          },
        ],
        series: [
          {
            name: "利润",
            type: "bar",
            label: {
              show: true,
              position: "inside",
            },
            data: [200, 170, 240, 244, 200, 220, 210],
          },
          {
            name: "收入",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
            },
            data: [320, 302, 341, 374, 390, 450, 420],
          },
          {
            name: "支出",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "left",
            },
            data: [-120, -132, -101, -134, -190, -230, -210],
          },
        ],
      };
      verBarChart.setOption(option);
    },
    initCate() {
      let cateChart = echarts.init(document.getElementById("cateEchart"));
      let option = {
        dataset: {
          source: [
            ["score", "amount", "product"],
            [89.3, 58212, "Matcha Latte"],
            [57.1, 78254, "Milk Tea"],
            [74.4, 41032, "Cheese Cocoa"],
            [50.1, 12755, "Cheese Brownie"],
            [89.7, 20145, "Matcha Cocoa"],
            [68.1, 79146, "Tea"],
            [19.6, 91852, "Orange Juice"],
            [10.6, 101852, "Lemon Juice"],
            [32.7, 20112, "Walnut Brownie"],
          ],
        },
        grid: {
          top: "2%",
          left: "2%",
          bottom: "25%",
          right: "2%",
          containLabel: true,
        },
        xAxis: {
          name: "amount",
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(219,225,255,1)",
              width: 1,
              type: "solid",
            },
          },
        },
        yAxis: {
          type: "category",
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(219,225,255,1)",
              width: 1,
              type: "solid",
            },
          },
        },
        visualMap: {
          orient: "horizontal",
          left: "center",
          min: 10,
          max: 100,
          text: ["High Score", "Low Score"],
          // Map the score column to color
          dimension: 0,
          inRange: {
            color: ["#D7DA8B", "#E15457"],
            symbolSize: [30, 100],
          },
          textStyle: {
            // color: "rgb(255,0,0)",
          },
          calculabel: true,
          formatter: function (value) {
            return value;
          },
        },
        series: [
          {
            type: "bar",
            encode: {
              // Map the "amount" column to X axis.
              x: "amount",
              // Map the "product" column to Y axis
              y: "product",
            },
          },
        ],
      };
      cateChart.setOption(option);
    },
    initGauge() {
      let gaugeChart = echarts.init(document.getElementById("gaugeEchart"));

      let option = {
        backgroundColor: "#0E1327",
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        series: [
          {
            type: "gauge",
            radius: "55%",
            center: ["20%", "58%"],
            startAngle: "225",
            endAngle: "55",
            pointer: {
              show: true,
              length: "60%",
              width: 4,
              itemStyle: {
                color: "#2F8FFF",
              },
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 4,
              itemStyle: {
                color: "#030A2C",
              },
            },
            detail: {
              formatter: "{value}" + "μg/m³",
              fontSize: 12,
              color: "#fff",
              offsetCenter: [0, "20%"],
            },
            data: [
              {
                value: 90.12,
                name: "PM2.5",
                title: {
                  offsetCenter: ["0%", "80%"],
                  fontSize: 12,
                  color: "#C9D2FA",
                  show: true,
                },
              },
            ],
            title: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: [
                  [1 / 2, "#2F8FFF"],
                  [1, "#566093"],
                ],
                width: 10,
                // shadowBlur: 15,
                // shadowColor: '#B0C4DE',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                opacity: 1,
              },
            },
            axisLabel: {
              show: false,
            }, //刻度标签。
            axisTick: {
              splitNumber: 3,
              distance: 4,
              show: true,
              lineStyle: {
                color: "#566093",
                width: 2,
              },
              length: 2,
            }, //刻度样式
            splitLine: {
              show: true,
              distance: 4,
              lineStyle: {
                color: "#566093",
                width: 2,
              },
              length: 4,
            }, //分隔线样式
            animationDuration: 4000,
          },
          {
            type: "gauge",
            radius: "75%",
            center: ["50%", "50%"],
            startAngle: "225",
            endAngle: "-45",
            pointer: {
              show: true,
              length: "60%",
              width: 4,
              itemStyle: {
                color: "#4ACBAC",
              },
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 4,
              itemStyle: {
                color: "#030A2C",
              },
            },
            detail: {
              formatter: "{value}%",
              fontSize: 12,
              color: "#fff",
              offsetCenter: [0, "20%"],
            },
            data: [
              {
                value: 39.53,
                name: "优良天数",
                title: {
                  offsetCenter: ["0%", "80%"],
                  fontSize: 12,
                  color: "#C9D2FA",
                  show: true,
                },
              },
            ],
            title: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: [
                  [1 / 2, "#4ACBAC"],
                  [1, "#566093"],
                ],
                width: 10,
                // shadowBlur: 15,
                // shadowColor: '#B0C4DE',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                opacity: 1,
              },
            },
            axisLabel: {
              show: false,
            }, //刻度标签。
            axisTick: {
              splitNumber: 3,
              distance: 4,
              show: true,
              lineStyle: {
                color: "#566093",
                width: 2,
              },
              length: 2,
            }, //刻度样式
            splitLine: {
              show: true,
              distance: 4,
              lineStyle: {
                color: "#566093",
                width: 2,
              },
              length: 4,
            }, //分隔线样式
            animationDuration: 4000,
          },
          {
            type: "gauge",
            radius: "55%",
            center: ["80%", "58%"],
            startAngle: "125",
            endAngle: "-45",
            pointer: {
              show: true,
              length: "60%",
              width: 4,
              itemStyle: {
                color: "#BC53EE",
              },
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 4,
              itemStyle: {
                color: "#030A2C",
              },
            },
            detail: {
              formatter: "{value}%",
              fontSize: 12,
              color: "#fff",
              offsetCenter: [0, "20%"],
            },
            data: [
              {
                // 指针位置
                value: 50,
                name: "重污染天数",
                title: {
                  offsetCenter: ["0%", "80%"],
                  fontSize: 12,
                  color: "#C9D2FA",
                  show: true,
                },
              },
            ],
            title: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                // 进度条颜色
                color: [
                  [0.5, "#BC53EE"],
                  [1, "#566093"],
                ],
                width: 10,
                // shadowBlur: 15,
                // shadowColor: '#B0C4DE',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                opacity: 1,
              },
            },
            axisLabel: {
              show: false,
            }, //刻度标签。
            axisTick: {
              splitNumber: 3,
              distance: 4,
              show: true,
              lineStyle: {
                color: "#566093",
                width: 2,
              },
              length: 2,
            }, //刻度样式
            splitLine: {
              show: true,
              distance: 4,
              lineStyle: {
                color: "#566093",
                width: 2,
              },
              length: 4,
            }, //分隔线样式
            animationDuration: 4000,
          },
        ],
      };

      gaugeChart.setOption(option);
    },
    initRace() {
      let raceChart = echarts.init(document.getElementById("raceEchart"));

      const data = [];
      for (let i = 0; i < 5; ++i) {
        data.push(Math.round(Math.random() * 200));
      }
      let option = {
        grid: {
          left: "0%",
          right: "10%",
          top: "10%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: {
          max: "dataMax",
        },
        yAxis: {
          type: "category",
          data: ["A", "B", "C", "D", "E"],
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 3, // only the largest 3 bars will be displayed
        },
        series: [
          {
            realtimeSort: true,
            name: "X",
            type: "bar",
            data: data,
            label: {
              show: true,
              position: "right",
              valueAnimation: true,
            },
          },
        ],
        legend: {
          show: true,
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear",
      };
      raceChart.setOption(option);
      this.raceChartRun(raceChart, data);
    },
    raceChartRun(raceChart, data) {
      for (var i = 0; i < data.length; ++i) {
        if (Math.random() > 0.9) {
          data[i] += Math.round(Math.random() * 2000);
        } else {
          data[i] += Math.round(Math.random() * 200);
        }
      }
      raceChart.setOption({
        series: [
          {
            type: "bar",
            data,
          },
        ],
      });

      setTimeout(() => {
        this.raceChartRun(raceChart, data);
      }, 0);
      setInterval(() => {
        this.raceChartRun(raceChart, data);
      }, 3000);
    },
    textChart() {
      let textChart = echarts.init(document.getElementById("textEchart"));

      let option = {
        graphic: {
          elements: [
            {
              type: "text",
              left: "center",
              top: "center",
              style: {
                text: "Text Animation",
                fontSize: 40,
                fontWeight: "bold",
                lineDash: [0, 200],
                lineDashOffset: 0,
                fill: "transparent",
                stroke: "#ff0",
                lineWidth: 1,
              },
              keyframeAnimation: {
                duration: 3000,
                loop: true,
                keyframes: [
                  {
                    percent: 0.7,
                    style: {
                      fill: "transparent",
                      lineDashOffset: 200,
                      lineDash: [200, 0],
                    },
                  },
                  {
                    // Stop for a while.
                    percent: 0.8,
                    style: {
                      fill: "transparent",
                    },
                  },
                  {
                    percent: 1,
                    style: {
                      fill: "#0f0",
                    },
                  },
                ],
              },
            },
          ],
        },
      };

      textChart.setOption(option);
    },
    loadingChart() {
      let loadingChart = echarts.init(document.getElementById("loadingEchart"));

      let option = {
        graphic: {
          elements: [
            {
              type: "group",
              left: "center",
              top: "center",
              children: new Array(7).fill(0).map((val, i) => ({
                type: "rect",
                x: i * 20,
                shape: {
                  x: 0,
                  // y: -40,
                  y: -200,
                  width: 10,
                  height: 80,
                },
                style: {
                  fill: "#ff0",
                },
                keyframeAnimation: {
                  duration: 1000,
                  delay: i * 200,
                  loop: true,
                  keyframes: [
                    {
                      percent: 0.5,
                      scaleY: 0.3,
                      easing: "cubicIn",
                    },
                    {
                      percent: 1,
                      scaleY: 1,
                      easing: "cubicOut",
                    },
                  ],
                },
              })),
            },
          ],
        },
      };

      loadingChart.setOption(option);
    },
  },

  mounted() {
    this.movingChart();

    this.initBar();
    this.initLine();
    this.initPie();
    this.initRadar();
    this.initPie2();
    this.initVecBar();
    this.initCate();
    this.initGauge();
    // this.initRace();
    this.textChart();
    this.loadingChart();
  },
};
</script>

<style scoped>
.box {
  position: relative;
  padding: 6px;
  width: 30%;
  height: 30vh;
  border: 1px solid rgb(93, 188, 235);
}

.box-title {
  position: absolute;
  left: 5px;
  top: 5px;
  font-size: 14px;
  color: #fff;
}
</style>